<template>
  <li class="CartCard">
    <van-checkbox
      v-model="checked"
      checked-color="#ee0a24"
      @click="addPrice"
    ></van-checkbox>
    <van-card
      num="2"
      :thumb="item.productInfo.image"
      @click-thumb="ToDetail(item.product_id)"
    >
      <template #title>
        <p class="title">{{ item.productInfo.store_name }}</p>
      </template>
      <template #desc>
        <span class="attr">属性：{{ item.productInfo.attrInfo.suk }}</span>
      </template>
      <template #price>
        <span> ￥{{ item.productInfo.price }} </span>
      </template>
      <template #num>
        <van-stepper
          v-model="value"
          @plus="plus"
          @minus="minus"
          @change="change"
        />
      </template>
    </van-card>
  </li>
</template>

<script>
export default {
  props: ["item", "AllSelectedflag", "All", "closeSelected"],
  data() {
    return {
      checked: false,
      value: 1,
      timer: null,
    };
  },
  created() {
    this.value = this.item.cart_num;
  },
  mounted() {
    var getCartSelectedList = localStorage.getItem("cartSelectedList");
    if (getCartSelectedList) {
      getCartSelectedList = JSON.parse(getCartSelectedList);
      getCartSelectedList.findIndex((i) => {
        if (i.id == this.item.id) {
          this.checked = true;
          this.addPrice();
        }
        return i.id == this.item.id;
      });
    }
  },
  methods: {
    addPrice() {
      this.$emit("AllFlag", true);
      this.$emit("accessCollect", this.checked, this.item);
      if (this.checked) {
        this.$emit("computedSelected", true);
        this.$emit(
          "computedPrice",
          this.value * this.item.productInfo.price,
          true
        );
      } else {
        this.$emit("computedSelected", false);
        this.$emit(
          "computedPrice",
          -this.value * this.item.productInfo.price,
          true
        );
      }
    },
    plus() {
      this.$emit("computedPrice", this.item.productInfo.price, this.checked);
    },
    minus() {
      this.$emit("computedPrice", -this.item.productInfo.price, this.checked);
    },
    ToDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    change() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.axios
          .post("/api/cart/num", {
            id: this.item.id,
            number: this.value,
          })
          .then((response) => {
            console.log(response.data.msg);
          });
      }, 500);
    },
  },
  watch: {
    AllSelectedflag(n) {
      if (!this.checked && n) {
        this.$emit("computedSelected", true);
        this.$emit(
          "computedPrice",
          this.value * this.item.productInfo.price,
          true
        );
        this.checked = n;
        return;
      }
      if (!n && this.checked && !this.All) {
        this.$emit("computedSelected", false);
        this.$emit(
          "computedPrice",
          -this.value * this.item.productInfo.price,
          true
        );
        this.checked = n;
        return;
      }
    },
    closeSelected() {
      this.$emit("computedSelected", false);
      this.$emit(
        "computedPrice",
        -this.value * this.item.productInfo.price,
        true
      );
      this.checked = false;
      return;
    },
    item(n) {
      this.value = n.cart_num;
    },
  },
};
</script>

<style lang="less">
.CartCard {
  width: 100%;
  padding: 0 15px;
  display: flex;
  background-color: #fff;
  margin-bottom: 10px;
  .van-card {
    width: calc(100% - 20px);
    background-color: #fff;
    padding-right: 0;
    .van-card__header {
      width: 100%;
      .van-card__content {
        width: 100%;
        > div {
          width: 100%;
          .title {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;
          }
          .attr {
            color: #868686;
          }
        }
        .van-card__bottom {
          .van-card__price {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>